import React, { Component } from 'react'

export default class App extends Component {

    state={
        firstName:'张',
        lastName:'一'
    }

    changeFirstName(e){
        // console.log(e.target.value);
        this.setState({
            firstName:e.target.value
        })
    }

    changeLastName(e){
        this.setState({
            lastName:e.target.value
        })
    }

    render() {
        return (
            <>
                <h1> {this.state.firstName}{this.state.lastName}说: 今天是周四,周六还会远吗?</h1>

                {/* 该输入框不能输入任何内容 */}
                {/* <input type="text" value={this.state.firstName}/> */}
                {/* 
                    如果你给输入框设置了value属性,就一定要给其添加一个 onChange 事件,否则
                    该输入框为只读,无法输入任何内容
                    如果说你是需要设置一个默认值, 那么你可以通过 defaultValue 进行设置默认值
                */}

                {/* 单纯的默认值当输入框内容发生改变时,不会影响到 firstName */}
                {/* <input type="text" defaultValue={this.state.firstName}/> */}


                {/* 该写法叫受控表单,只要有 value 代表是受控的,没有value就是非受控 */}
                <input type="text" value={this.state.firstName} onChange={(e)=>{this.changeFirstName(e)}}/>
                
                <input type="text" value={this.state.lastName} onChange={(e)=>{this.changeLastName(e)}}/>
            </>
        )
    }
}
